<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-22 01:23
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div v-if="isSelectedFormItem" key="XDesignFormItemAttrs" style="overflow-x: hidden;padding: 5px;">
    <x-attrs-header
      :url="attrLink"
      :title="attrTitle"
      @change="searchChangeHandler"
    />
    <a-skeleton active :paragraph="{rows:10}" :loading="!formShow">
      <x-render-form
        v-if="formShow"
        ref="xDesignFormItem"
        v-model="formData"
        :form-options="formOptions"
        @change="changeHandler"
      />
    </a-skeleton>
  </div>
  <div v-else key="XDesignFormItemAttrsTip" class="form-item-placeholder" :style="{color:formErrorColor}">
    从左侧点选添加表单项
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
import XAttrsHeader from '../XDesignAttrsHeader'

export default {
  name: 'XDesignFormItemAttrs',
  inject: ['xDesignForm'],
  components: { XAttrsHeader },
  data() {
    return {
      formShow: true,
      formOptions: []
    }
  },
  computed: {
    formErrorColor: {
      get() {
        const { xDesignForm } = this
        return xDesignForm.formPropsData.errorColor || '#409eff'
      }
    },
    isSelectedFormItem: {
      get() {
        const { xDesignForm } = this
        return !!xDesignForm.currentId
      }
    },
    formData: {
      get() {
        const { xDesignForm } = this
        const formOption = xDesignForm.getCurrentFormOption()
        if (!formOption.attrs) {
          return {}
        }
        return formOption.attrs
      },
      set(val) {
        const { xDesignForm } = this
        const formOption = xDesignForm.getCurrentFormOption()
        this.$set(formOption, 'attrs', val)
      }
    },
    // 文档链接
    attrLink() {
      const { xDesignForm } = this
      const formOption = xDesignForm.getCurrentFormOption()
      if (!formOption.type) {
        return ''
      }
      return xDesignForm.attrUrlMap[formOption.type]
    },
    attrTitle() {
      const { xDesignForm } = this
      const formOption = xDesignForm.getCurrentFormOption()
      if (!formOption.type) {
        return ''
      }
      return formOption.type.startsWith('XRender') ? formOption.type.substring(7) : formOption.type
    },
    prop: {
      get() {
        const { xDesignForm } = this
        const formOption = xDesignForm.getCurrentFormOption()
        if (formOption.isLayout) {
          return ''
        }
        return formOption.formItem.prop
      }
    }
  },
  watch: {
    'xDesignForm.currentId': {
      immediate: true,
      deep: true,
      handler() {
        this.initFormOptions()
        this.$nextTick(() => {
          this.formShow = false
        })
        setTimeout(() => {
          this.$nextTick(() => {
            this.formShow = true
          })
        }, 500)
      }
    }
  },
  methods: {
    initFormOptions() {
      const { xDesignForm } = this
      const formOption = xDesignForm.getCurrentFormOption()
      this.formOptions.splice(0, this.formOptions.length, ...cloneDeep(xDesignForm.attrsMap[formOption.type]))
    },
    changeHandler({ prop: formProp, value }) {
      const { xDesignForm, prop } = this
      if (formProp === 'value' && !!prop) {
        this.$set(xDesignForm.formData, prop, value)
      }
    },
    searchChangeHandler(keyword) {
      const formOptions = cloneDeep(this.formOptions)
      const showProps = []
      const hideProps = []
      for (const option of formOptions) {
        if (!option.formItem) {
          continue
        }
        const formItem = option.formItem
        if ((!!formItem.prop && formItem.prop.includes(keyword)) || (!!formItem.label && formItem.label.includes(keyword)) || (!!formItem.extra && formItem.extra.includes(keyword))) {
          showProps.push(formItem.prop)
        } else {
          hideProps.push(formItem.prop)
        }
      }
      const xDesignFormItem = this.$refs.xDesignFormItem
      xDesignFormItem.showFields(...showProps)
      xDesignFormItem.hideFields(...hideProps)
    }
  }
}
</script>
<style lang="css" scoped>
.form-item-placeholder {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
</style>
